<template>
  <div class="role-list">
    <div>
      <a-scrollbar style="height: 600px; overflow: auto">
        <div class="scroll">
          <div class="scroll-title"><h4>仓库类型</h4> </div>
          <div class="scroll-content">
            <a-tree
              :fieldNames="{
                key: 'type',
                title: 'name',
              }"
              :data="treeData"
              showLine
              @select="getTreeId"
            >
            </a-tree>
          </div>
        </div>
      </a-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';

  import mitter from '@/utils/mitt';

  const treeData = [
    { name: '仓库', type: 1 },
    { name: '货架', type: 2 },
    { name: '库位', type: 3 },
  ];

  const getTreeId = (e: number[]) => {
    mitter.emit('warehousetype', e[0]);
  };
</script>

<style scoped lang="less">
  .role-list {
    padding: 10px;
    width: 100%;
    background-color: #f5f7fa;

    // height: 300px;
    .scroll {
      padding: 10px;
      .search {
        background-color: #fff;
        height: 40px;
        border: 1px solid #ccc;
      }
      &-title {
        height: 30px;
        border-bottom: 1px solid #ccc;
      }
      &-content {
        padding: 10px;
      }
    }
  }
</style>
